
// 下拉菜单
$(".list-big-wrap").hover(function(){
    $(this).siblings(".list-big").stop().show().parent().siblings().children(".list-big").stop().hide()
})

$(".leave").on("mouseleave",  ()=>{
    $(".list-big").css({
        display: "none"
    })
})


// 数据渲染
// 男装
$.ajax({
    url:"http://localhost:3344/josn/goods.json",
    success:(res)=>{
        // console.log(res)
        let str = "";
        for(let i=0;i<res.length;i++){
            str += `<li>
            <a href="http://localhost:3344/xiangqing.html?id=${res[i].id}">
              <img src="${res[i].img}" alt="" />
            </a>
            <a
              class="a-2"
              href="http://localhost:3344/xiangqing.html"
            
            >
              <span>${res[i].name}</span>
            </a>
            <p>
            ${res[i].xianjia}
              <del class="del">${res[i].yuanjia}</del>
            </p>
          </li>
          `
        }
        $(".goods-list").html(str);
    }
});



// 女装
$.ajax({
    url:"http://localhost:3344/josn/goods-girl.json",
    success:(res)=>{
        // console.log(res)
        let str = "";
        for(let i=0;i<res.length;i++){
          
            str += `<li>
            <a href="http://localhost:3344/xiangqing.html?id=${res[i].id}" class="addCart">
              <img src="${res[i].img}" alt="" />
            </a>
            <a
              class="a-2"
              href="http://localhost:3344/xiangqing.html"
            >
              <span>${res[i].name}</span>
            </a>
            <p>
            ${res[i].xianjia}
              <del class="del">${res[i].yuanjia}</del>
            </p>
          </li>
          `
        }
        $(".girlist").html(str);
    }
});



  // 渲染跳转
  (($) => {
    // "use strict";
    $.ajax({
      url: "http://localhost:3344/josn/goods-girl.json",
      success: (res) => {
        let i = 0;
        res.some((val, idx) => {
          i = idx;
          return val.id === location.search.split("=")[1];
        });
        
        let imgList = `<div id="div1">
                        <div id="small">
                          <img src="${res[i].img}" alt="" />
                          <div id="mask"></div>
                        </div>
                        <div id="big">
                          <img src="${res[i].img}" alt="" id="img" />
                        </div>
                        <ul>
                          <li><img src="${res[i].img}" alt="" /></li>
                        </ul>
                      </div>
          <div class="goods-right">
            <div class="title">
              <h1>唐狮2019秋季工装衬衫男长袖青年港风潮流宽松学生休闲衬衣韩版潮</h1>
            </div>
            <div class="goods-right-price">
              <p style="padding-top: 10px">
                市场价格
                <del>${res[i].yuanjia}</del>
              </p>
              <p class="baoyou">全场包邮</p>
              <div class="sale">
                <p>销售价:￥</p>
                <p class="price">${res[i].xianjia}</p>
              </div>
            </div>
  
            <div class="color-size">
              <ul class="xuanze-color">
                <p>颜色:</p>
                <li><a href="">红</a></li>
                <li>绿</li>
                <li>蓝</li>
              </ul>
              <ul class="xuanze-size">
                <p>尺寸:</p>
                <li><a href="">M</a></li>
                <li>L</li>
                <li>XL</li>
              </ul>
              <div class="math">
                <span>数量</span>
    
                <span>-</span>
                <input type="text" value="1" />
                <span>+</span>
              </div>
            </div>
  
            <button class="add-goods">添加到购物车</button>
            <button class="add-goods shoucang">收藏商品</button></div>
          </div>`
          // console.log(imgList)
          $(".goods-detail-wrap").html(imgList);
          fangda();
      },
    });
  })(jQuery);